body {
    overflow: hidden; /* 防止页面整体滚动 */
    position: fixed; /* 固定页面位置，防止上下移动 */
    width: 100%;
    height: 100%;
}

.price-item {
    position: absolute;
    left: 15px;
    bottom: 20px;
}

.space {
    position: absolute;
    right: 25px;
    top: 30px;
}

.price {
    font-size: 32px;
}

.month {
    width: 100%;
    position: relative; /* 确保内容左右不移动 */
}

.month-container {
    background: url("../../assets/top.jpg");
    height: 160px;
    width: 100%;
    background-size: cover;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #eee;
    position: fixed; /* 确保固定在页面顶部 */
    top: 0; /* 固定位置 */
    z-index: 1000; /* 保证层级在其他内容之上 */
}

.bill-list {
    margin-top: 160px; /* 确保内容不被遮挡 */
    width: 100%;
}

.list {
    display: flex; /* 使用 flex 布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: calc(100vh - 300px); /* 固定高度，调整为实际需求 */
    overflow: hidden; /* 禁止外部容器滚动 */
    width: 100%; /* 确保宽度始终填满容器 */
    max-width: 100%; /* 防止宽度变小 */
    min-width: 100%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
    
}

.list .listitem {
    overflow-y: auto; /* 允许内部内容滚动 */
    height: 100%; /* 限制滚动区域高度 */
    width: 100%; /* 内容宽度填满容器 */
    -webkit-overflow-scrolling: touch; /* 优化滚动体验 */
}

.month-save {
    font-size: 16px;
    color: #ccc;
    position: absolute;
    left: 20px;
    top: 50px;
}

.edit-icon {
    position: fixed;
    bottom: 115px;
    right: 30px;
    width: 70px;
    height: 70px;
    color: brown;
    background-color: aliceblue;
    border-radius: 35px;
    text-align: center;
    z-index: 1000; 
    box-shadow: none; /* 移除阴影 */
    transition: none; /* 移除交互动画 */
}

.edit-icon:hover {
    transform: scale(1.1); /* 鼠标悬停放大效果 */
    box-shadow: 0 6px 16px rgba(255, 167, 38, 0.5); /* 鼠标悬停阴影效果 */
}

.voice {
    position: fixed;
    bottom: 70px;
    right: 20px;
    z-index: 1000; 
    background-color: aliceblue;
    color: brown;
    box-shadow: none; /* 移除阴影 */
    transition: none; /* 移除交互动画 */
}

.voice:hover {
    transform: scale(1.1); /* 鼠标悬停放大效果 */
    box-shadow: 0 6px 16px rgba(100, 181, 246, 0.5); /* 鼠标悬停阴影效果 */
}

.navbar {
    position: fixed; /* 固定底部导航 */
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px; /* 根据实际需求调整高度 */
    background-color: #f0f2f5;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around; /* 平均分布导航项 */
    align-items: center; /* 垂直居中 */
    z-index: 1000; /* 保证层级在其他内容之上 */
}

/* 添加媒体查询以适应不同屏幕宽度 */
@media (min-width: 768px) {
    .month {
        width: 80%;
        margin: 0 auto;
    }
}

@media (min-width: 1024px) {
    .month {
        width: 60%;
        margin: 0 auto;
    }
}